import React, { Component } from 'react';
/*
  学习目标：嵌套路由的使用-将children组件设置3个二级路由

*/

import './index.css';

import { BrowserRouter as Router, Route, Link, NavLink, Switch, Redirect } from 'react-router-dom';

export default class App extends Component {
  render() {
    return (
      <Router>
        <NavLink to="/home" activeClassName="xxx-xx-active" exact>
          点我跳到home
        </NavLink>
        <br />
        <NavLink to="/my" activeClassName="xxx-xx-active">
          点我跳到my
        </NavLink>
        <br />
        <Link to="/friend">点我跳到friend</Link>
        <Switch>
          <Redirect from="/" to="/home" exact></Redirect>
          <Route path="/home" component={Home}></Route>
          <Route path="/my" component={My}></Route>
          <Route path="/my" component={My}></Route>
          <Route path="/my" component={My}></Route>
          <Route path="/my" component={My}></Route>
          {/* 注意：
            1. 💥嵌套路由一般不能使用exact
            2. 父子级路径可以同名
            3. Router组件全局只会使用一次，不会再二级路由中使用Router
          */}
          <Route path="/friend" component={Friend}></Route>
          <Route component={NotFound}></Route>
        </Switch>
      </Router>
    );
  }
}
function Friend() {
  return (
    <div>
      <h1>我是Friend组件</h1>
      <Link to="/friend">朋友1</Link>
      <br />
      <Link to="/friend/friend2">朋友2</Link>
      <br />
      <Link to="/friend/friend3">朋友3</Link>
      {/* 2. 在父组件的JSX内，设置二级路由规则 */}
      <Switch>
        <Route path="/friend" component={Friend1}></Route>
        <Route path="/friend/friend2" component={Friend2}></Route>
        <Route path="/friend/friend3" component={Friend3}></Route>
      </Switch>
    </div>
  );
}

function NotFound(params) {
  return <h2>我是404页面</h2>;
}

function Home() {
  return <h1>我是Home组件</h1>;
}

function My() {
  return <h1>我是Find组件</h1>;
}

// 1. 新建三个子组件
function Friend1() {
  return <h2>我是Friend1</h2>;
}

function Friend2() {
  return <h2>我是Friend2</h2>;
}

function Friend3() {
  return <h2>我是Friend3</h2>;
}
